<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Prof</title>
<link href="./favicon.ico" type="image/x-icon" rel=icon>
<link rel="stylesheet" type="text/css"
	href="/themes/bootstrap/easyui.css">
<link href="/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="/themes/icon.css">
<script src="/js/jquery.min.js"></script>
<script src="/js/jquery.easyui.min.js"></script>
<script src="/js/util.js"></script>
<style type="text/css">
.chart {
	height: 350px;
}
</style>
</head>
<body>
	<ul id="nav" style="margin-top: -70px;"></ul>
	<div class="container-fluid">
		<div class="panel panel-success">
			<div class="panel-heading">
				<label for="host">进程</label><input id="proc" value=""> <label>开始</label>
				<input class="easyui-datetimebox" name="bTime" id="bTime"
					value="8/15/2016 0:0"> <label for="eTime">结束</label> <input
					class="easyui-datetimebox" name="eTime" id="eTime"
					value="8/16/2016 2:3">
				<button class="btn btn-success" id="qBtn" onclick="return doQuery()">查询</button>
			</div>
			<div class="panel-body">
				<div class="row">
					<div class="col-sm-6" id="gc"></div>
					<div class="col-sm-6" id="bugs"></div>
				</div>
				<div class="row">
					<div class="col-sm-6" id="cpu"></div>
					<div class="col-sm-6" id="load"></div>
				</div>
			</div>
		</div>
	</div>
</body>
</html>
<script src="/js/bootstrap.min.js"></script>
<script src="/js/highcharts.js"></script>
<script type="text/javascript">

	var date = new Date();
	$("#eTime").val(date.Format('yyyy-MM-dd HH:mm'));
	date.setMinutes(date.getMinutes() - 60);
	$("#bTime").val(date.Format('yyyy-MM-dd HH:mm'));

	$(function() {
		initNavMenu('#nav');
		Util.builCombox('#proc', '/ui/select?id=queryProcess', 'key', 'value');
	});

	function getFormVal(type) {
		var arr = {
			'proc' : Util.getCombobox('#proc'),
			'begin' : getTime('#bTime'),
			'end' : getTime('#eTime'),
		};
		return arr;
	}

	function doQuery() {
		$.get('/perf/query', getFormVal(), function(res) {
			if (res.gc) {
				createTimeChart('#gc', 'spline', res.gc.sers, 'GC-info');
			}
			if (res.bugs) {
				createTimeChart('#bugs', 'spline', res.bugs.sers, 'Bug-info');
			}
		});
	}
</script>